<template>
	<view class="pointShop">
		<view class="search">
			<uni-search-bar 
				placeholder='搜索门店'
				:radius='50'
				v-model='keyword'
				cancelButton='none'
				@input='initShop()'
				></uni-search-bar>
		</view>
		<view  style="width:100%;" v-if="shop_img">
			<image :src="shop_img"  mode='widthFix' style="width:100%;"></image>
		</view>
		<!-- <view class="menus">
			<view @click='page = 1;styleId = item.styleId;initKindShop()' :class="['menuOne',styleId == item.styleId?'active':'']" v-for="(item,index) in kind" :key='index'>
				<text>{{item.style_name}}</text>
				<view class="line"></view>
			</view>
		</view> -->
		<view class="shopList" v-if='shop.length'>
			<view class="shopOne dFlex jStart_aStart" v-for='(item,index) in shop' :key='index'  style="border-bottom: 1px solid #ddd;padding-bottom: 10px;">
				<view class="shopImg imgPublic dFlex jCenter_aCenter" @click='lookBig(item)'>
					<image :src="item.store_img" mode='widthFix'></image>
				</view>
				<view class="shopInfo">
					<view class='shopName'>{{item.store_name}}</view>
					<view class="config">
						<view class="huiCol dFlex jBetween_aCenter" style="margin-bottom: 6px;">
							<view @click='makeCall(item.tel)'>电话：<text>{{item.tel}}</text></view>
							<view v-if='item.is_look == "2"' class="openVip" @click='openVIP'>开通会员</view>
						</view>
						<view class="huiCol">距离：{{item.distance}}</view>
					</view>
					<view class="price dFlex jEnd_aCenter">
						<view class="showPrice">
							门店地址：<text>{{item.area}}</text>
						</view>
						<view  class="btn" @click="daohang(item)">导航到店</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty imgPublic" v-else>
			<image src="../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleId:'',
				shop_img:'',
				shop:[],
				keyword:'',
				showPermission:true,
			};
		},
		onLoad(e){
			this.styleId = e.styleId?e.styleId:'';
			console.log(this.styleId);
			if(this.styleId==152){
				this.tool.getData('User/about',{}).then(res=>{
					if(res){
						this.shop_img = res.images7
					}
				}).catch(err=>{
					console.log(err);
				})
			}
			
			uni.setNavigationBarTitle({
				title:e.styleName,
			})
			// #ifdef MP-WEIXIN
			this.initShop();
			// #endif
			// #ifdef APP-PLUS
			this.initdata();
			// #endif
			
		},
		methods:{
			lookBig(item){
				uni.previewImage({
					current:item.store_img,
					urls:[item.store_img]
				})
			},
			initdata(){
				this.initShop();
				// #ifdef APP-PLUS
				if(!getApp().globalData.lng){
					uni.showModal({
						title:'权限申请说明',
						content:'本次申请使用您的位置权限用于计算与门店的距离，是否同意',
						success:(op)=>{
							if(op.confirm){
								this.getlocation()
							}
						},
					})
				}
				
				// #endif
				
			},
			getlocation(){
				uni.getLocation({
					type:'wgs84',
					success: (res) => {
						getApp().globalData.lat = res.latitude;
						getApp().globalData.lng = res.longitude;
						this.initShop();
					},
					fail:(err)=>{
						console.log(err);
					},
					complete:()=>{
						
					}
				})
			},
			// 分类下的商品
			initShop(){
				this.tool.getData('Index/storeList',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					styleId:this.styleId,
					keyword:this.keyword,
					lat:getApp().globalData.lat,
					lng:getApp().globalData.lng,
				}).then(res=>{
					console.log(res);
					if(res){
						this.shop = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 导航
			daohang(line){
				uni.openLocation({
					latitude:parseFloat(line.lat),
					longitude:parseFloat(line.lng),
					name:line.store_name,
					address:line.area,
				})
			},
			// 拨打电话
			makeCall(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			// 开通VIP
			openVIP(){
				if(uni.getStorageSync('userId')){
					uni.navigateTo({
						url:'/person/vip'
					})
				}else{
					// #ifdef MP-WEIXIN
					uni.redirectTo({
						url:'/person/login'
					})
					// #endif
					// #ifdef APP-PLUS
					uni.redirectTo({
						url:'/person/mobileLogin'
					})
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
	.pointShop{
		width:100%;
		.search{
			width:100%;
			.uni-searchbar{
				padding:12px!important;
			}
		}
		.shopList{
			width: 100%;
			padding:12px;
			box-sizing: border-box;
			.shopOne{
				width:100%;
				margin-bottom: 12px;
				.shopInfo{
					width:calc(100% - 109px);
					.price{
						width:100%;
						// background: rgba(100, 255, 255, 0.1);
						overflow: hidden;
						.showPrice{
							flex:1;
							font-size: 12px;
							color:#666666;
							text-align: left;
							text{
								color:#1664FF;
							}
						}
						.btn{
							color:white;
							background:#1664FF;
							padding:5px 10px;
							font-size:13px;
							border-radius: 5px;
							width: max-content;
						}
					}
					.config{
						width:100%;
						font-size:12px;
						color:#666666;
						margin: 8px auto 6px;
						.huiCol{
							.openVip{
								font-size:12px;
								color:#1664FF;
							}
							text{
								// text-decoration: line-through;
								color:#1664FF;
							}
						}
					}
					.shopName{
						width:100%;
						font-weight:bold;
						line-height: 20px;
						word-break: break-all;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.shopImg{
					width:120px;
					height: auto;
					overflow: hidden;
					margin-right: 12px;
					border-radius: 5px;
					image{
						width:100%;
						border-radius: 5px;
						height: auto;
					}
				}
			}
		}
		.menus{
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			.menuOne{	
				display: inline-block;
				width:20%;
				text-align: center;
				font-weight: bold;
				color:#999999;
				.line{
					width: 21px;
					height: 2px;
					border-radius: 50px;
					margin: 7px auto 0;
					background: none;
				}
			}
			.active{
				color: #323232;
				.line{
					background: #1664FF;
				}
			}
		}
	}
	page{
		background:white;
	}
</style>
